@charset "UTF-8";
@import "_reset";

@keyframes backrotate {
    0%{transform: rotateZ(0);}
    100%{transform: rotateZ(360deg);}
}

.musicList{
    width: 100vw;
    height: 100vh;
    background-color: #131313;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    .back-img{
        width: 100vw;
        height: 100vh;
        transform: scale(1.1);
        position: absolute;
        top: 0;
        left: 0;
        -webkit-filter: blur(10px);
        -moz-filter: blur(10px);
        -o-filter: blur(10px);
        -ms-filter: blur(10px);
        filter: blur(10px);
        img{
            width: 100%;
            height: 100%;
        }
    }

    .go-back{
        font-size: vw(60);
        color: white;
        position: fixed;
        top: vw(10);
        left: vw(20);
        z-index: 11;
    }
    .back-ani{
        animation-play-state: paused !important;
    }
    .pole{
        width: vw(200);
        position: fixed;
        top: vw(0);
        left: 47%;
        // transform: translateX(-10%);
        z-index: 11;
        transform-origin: 10% 0;
        img{
            width: 100%;
        }
    }
    .cd{
        width: vw(530);
        border-radius: 50%;
        margin: 0 auto;
        overflow: hidden;
        margin-top: vw(130);
        position: relative;
        animation: backrotate 6s linear infinite;
        animation-play-state: running;
        img{
            width: 100%;
        }
        .back-pic{
            width: vw(345);
            border: 4px solid black;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            img{
                width: 100%;
            }
        }
    }

    .musicPlay{
            position: absolute;
            top: vw(400);
            left: 50%;
            transform: translate(-50%,-50%);
            display: none;
        .circle{
            width: vw(120);
            height: vw(120);
            border: 2px solid white;
            background-color: rgba($color: #000000, $alpha: 0.4);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        span{
            color: white;
            font-size: vw(60);
            display: block;
            transform: rotateZ(90deg);
            position: relative;
            left: vw(3);
        }
    }
    .song-msg{
        height: 26vh;
        color: white;
        font-size: vw(40);
        letter-spacing: vw(10);
        line-height: vw(80);
        z-index: 100;
        text-align: center;
        position: relative;
        overflow: hidden;
        // text-shadow: .1rem 0rem .1rem white,-.1rem 0rem .1rem white,0rem .1rem .3rem white,0rem -.1rem .3rem white;
        p{
            width: 70vw;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 0 auto;
        }
    }
    .next{
        color: white;
        position: fixed;
        bottom: 6vh;
        left: 50%;
        transform: translateX(-50%);
        z-index: 20;
        display: flex;
        .next-l{
            margin-right: 20vw;
            i{
                font-size: 10vw;
            }
        }
        .next-r{
            margin-left: 20vw;
            i{
                font-size: 10vw;
            }
        }
        .stop-btn{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            i{
                font-size: 20vw;
            }
        }
        .play-btn{
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            i{
                font-size: 20vw;
            }
        }
    }
    .progress{
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 17vh;
        // padding-top: vw(2);
        .van-slider{
            width: 70vw;
            .van-slider__bar{
                font-size: 16px;
                .van-slider__button-wrapper{
                    .van-slider__button{
                        width: vw(20);
                        height: vw(20);
                    }
                }
            }
        }
        .current{
            color: white;
            position: absolute;
            top: vw(-10);
            left: vw(-80);
        }
        .duration{
            color: white;
            position: absolute;
            top: vw(-10);
            right: vw(-80);
        }
    }

    .open{
        color: #ff3a3a;
        width: vw(320);
        height: vw(80);
        border-radius: vw(50);
        border: 2px solid #ff3a3a;
        background-color: transparent;
        position: fixed;
        bottom: vw(30);
        left: vw(40);
    }
    .down-load{
        color: white;
        width: vw(320);
        height: vw(80);
        border-radius: vw(50);
        border: 2px solid #ff3a3a;
        background-color: #ff3a3a;
        position: fixed;
        bottom: vw(30);
        right: vw(40);
    }
}